<!--结构必须如下 创建新组件是可以复制以下html-->
<!--
<div class="自定义class">
  <div class="design-preview-controller">
     预览区域
  </div>
  <div class="design-editor-item design-hide-class" v-if="isShowEdit">
      <div class="design-config-editor">
      <div class="design-editor-component-title">组件名称(如果为顶部配置组件可以不要该dom)</div>
      编辑区域
      </div>
  </div>
</div>
-->
<template>
  <div class="micro-header-box">
    <!--预览控制区-->
    <div class="design-preview-controller">
      <div class="preview-header">
        <div class="preview-header-title">{{ formData.title || '微页面标题' }}</div>
      </div>
    </div>
    <!--编辑工作区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
       <el-scrollbar wrap-class="scroll-content">
         <div class="rightWrap">
            <div class="design-editor-component-title">页面设置</div>
            <el-collapse v-model="headerActive" class="header-collapse">
              <el-collapse-item title="基本信息" name="1">
                <el-form :model="formData" ref="formData" label-width="100px">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="页面名称："  prop="title" :rules="[{required: true, message: '页面名称不能为空', trigger: 'blur'}]" >
                        <el-input v-model="formData.title" placeholder="请输入名称" size="small" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="页面描述：">
                        <el-input v-model="formData.pageDesc" size="small" type="textarea" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="样式模板：">
                        <div class="page-style" @click="pageStyleC">
                          <span>{{ formData.pageStyle }}</span>
                          <i class="el-icon-arrow-right"></i>
                        </div>
                        <!-- <el-input v-model="formData.pageStyle" size="small" suffix-icon="el-icon-arrow-right" readonly /> -->
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="页面背景：">
                        <el-radio-group v-model="formData.bg" class="radio-font">
                          <el-radio :label="0">纯色</el-radio>
                          <el-radio :label="1">图片</el-radio>
                        </el-radio-group>
                        <div class="shop-bg-cont" >
                          <div v-show="formData.bg == '1'">
                            <div  class="cont-image" @click="changeImg" v-if="!this.formData.bgImage">
                              <span>+</span>
                              <p class="re-choose-img">添加图片</p>
                            </div>
                            <div class="cont-image cont-images" v-else>
                              <el-image :src="formData.bgImage" fit="cover"></el-image>
                              <div class="cont-images-name" @click="changeImg">更换图片</div>
                            </div>
                          </div>

                          <div v-show="formData.bg != '1'"><el-color-picker v-model="formData.bgColor"></el-color-picker></div>
                        </div>
                      </el-form-item>
                    </el-col>
                     <el-row>
                    <el-col :span="24">
                      <el-form-item label="页面分类：">
                        <el-select v-model="formData.pageClassify" placeholder="请选择">
                          <el-option label="系统页面" :value="0"></el-option>
                          <el-option label="功能页面" :value="1"></el-option>
                          <el-option label="商品页面" :value="2"></el-option>
                          <el-option label="商品活动页面" :value="3"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="页面共享：">
                        <el-radio-group v-model="formData.pageShare">
                          <el-radio :label="0">不共享</el-radio>
                          <el-radio :label="1">共享</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  </el-row>
                </el-form>
              </el-collapse-item>
              <el-collapse-item title="页面推广" name="2">
                <el-form label-width="100px">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="分享标题：" >
                        <el-input v-model="formData.shareTitle" placeholder="请输入名称" size="small" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="分享描述：">
                        <el-input v-model="formData.shareDesc" size="small" type="textarea" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="分享方式：">
                        <el-checkbox-group v-model="formData.shareList">
                          <el-checkbox label="1">小程序</el-checkbox>
                          <el-checkbox label="2">H5</el-checkbox>
                          <el-checkbox label="3">海报</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-collapse-item>
            </el-collapse>
         </div>
       </el-scrollbar>
      <!-- <div class="design-config-editor">
        <el-form ref="formData" :model="formData" label-width="100px">
          <el-form-item
            label="页面名称:"
            prop="title"
            :rules="{
              required: true, message: '页面名称不能为空', trigger: 'blur'
            }"
          >
            <el-input v-model="formData.title" placeholder="请输入名称" size="small" />
          </el-form-item>
          <el-form-item label="页面描述:">
            <el-input v-model="formData.description" size="small" placeholder="用户通过微信分享给朋友时，会自动显示页面描述" />
          </el-form-item>
          <el-form-item label="是否定时发布:">
            <el-switch
              v-model="formData.hasTimingPublish"
              :active-value="1"
              :inactive-value="0"
              :disabled="id!==''"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item
            v-if="formData.hasTimingPublish"
            label="定时发布时间:"
            prop="gmtStart"
            :rules="{
              required: true, message: '发布时间不能为空', trigger: 'blur'
            }"
          >
            <el-date-picker
              v-model="formData.gmtStart"
              :disabled="id!==''"
              size="mini"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            />
          </el-form-item>
          <el-form-item label="是否显示标题:">
            <el-switch
              v-model="formData.hasDisplay"
              :disabled="id!==''"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </el-form>
      </div> -->
    </div>
    <choosePageTemplate ref="templateStyle" :page-id="currentPageId" @choosePageTemplateEnd="choosePageTemplateEnd" />
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
